<template>
	<view class="page">
		<view class="nav_barH"></view>
		<!-- nav bar -->
		<view class="padding-lr flex justify-between align-center" style="height: 88rpx;">
			<uni-icons type="arrowleft" size="20" color="#999999" @click="back"></uni-icons>
		</view>
		<!-- 欢迎语 -->
		<view style="">
			<view class="text-xxl text-bold text-333" style="text-align: center;margin-top: 170rpx;font-size: 36rpx;">
				输入手机号</view>
			<view class="text-lg text-666 margin-top-sm" style="width: 100%;text-align: center;margin: 50rpx auto;">
				<view>我们已向{{phone}} 发送验证码</view>
				<view style="margin-top: 20rpx;">请查看短信并输入验证码</view>
			</view>
		</view>
		<!-- 验证码 -->
		<view style="padding: 0 70rpx;margin-top: 120rpx;">
			<view class="code-wrap">
				<view class="wrap-top" @click="handleFocus">
					<view class="list-item">{{codeList[0] || ''}}</view>
					<view class="list-item">{{codeList[1] || ''}}</view>
					<view class="list-item">{{codeList[2] || ''}}</view>
					<view class="list-item">{{codeList[3] || ''}}</view>
				<!-- 	<view class="list-item">{{codeList[4] || ''}}</view>
					<view class="list-item">{{codeList[5] || ''}}</view> -->
				</view>
				<view class="wrap-input">
					<input class="input" type="number" maxlength="6" :focus="focus" v-model="codes" @focus="handleFocus"
						@blur="handleBlur" />
				</view>
			</view>
		</view>
		<!-- 提示 -->
		<view class="text-df text-333 margin-top" style="text-align: center;" @tap="getCode">
			{{codeStr}}
		</view>
		<!-- 按钮 -->
		<view class="flex justify-center align-center" style="margin-top: 100rpx;">
			<button class="cu-btn action-btn" @click="handleJump" data-type="REDIRECT"
				:data-url="PAGE_BASE_URL + 'login-password/index?phone='+phone">使用账号登录</button>
		</view>
		<!-- 协议 -->
		<!-- <view class="flex justify-center align-center text-999 text-xs" style="margin-top: 310rpx;">点击登录即表示您已阅读并同意<text
				class="text-xs" style="color: #12A4FF;" @click="look">《隐私协议》</text></view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				codes: '',
				codeList: [],
				loading: false,
				codeStr: '(60s)后可重新获取短信',
				timer: null,
				focus: true,
				again: false,
				PAGE_BASE_URL: '/pages/user/login/', // 页面基础路径
			};
		},
		watch: {
			codes(val) {
				if (val) {
					let arr = val.split('');
					this.codeList = arr;
					console.log(this.codeList);
				} else {
					this.codeList = [];
				}
			},
			codeList(val) {
				if (val.length === 4) {
					this.submit();
				}
			}
		},
		methods: {
			// 倒计时
			downCount() {
				let count = 60;
				this.timer = setInterval(() => {
					--count;
					if (count <= 0) {
						clearInterval(this.timer);
						this.codeing = false;
						this.codeStr = '重新发送';
						this.again = true;
						return;
					}
					this.codeStr = '(' + count + 's)后可重新获取短信	';
				}, 1000)
			},
			// 重新验证码
			getCode() {
				if (this.again) {
					this.again = false;
					this.$api.post(global.apiUrls.GetVerifyCode, {
						mobile: this.phone,
						type: 3,
						is_test: 1,
					}).then(res => {
						console.log(res);
						uni.showToast({
							icon: 'none',
							title: res.data.code,
							duration: 2000
						})
						this.downCount();
					}).catch(err => {
						console.log(err)
					})
				}

			},
			// 聚焦事件
			handleFocus() {
				console.log('input 获取焦点')
				this.focus = true;
			},
			// 失焦事件
			handleBlur() {
				console.log('input 失去焦点');
				this.focus = false;
			},
			/**
			 * @event 立即登录按钮点击事件
			 */
			submit() {
				// 保存this
				let _this = this;

				// #ifdef APP-PLUS
				// @desc 隐藏安全键盘
				plus.key.hideSoftKeybord();
				// #endif

				// 如果按钮状态是加载中，直接return，防止用户多次点击
				if (_this.is_click) return;
				// 结构出来phone手机号，vercode验证码

				let {
					phone,
					vercode
				} = this;
				// 如果手机号为空就提示用户
				if (!phone) {
					_this.$message.info("请输入手机号");
					return false;
				}
				// 选择用户协议
				// if (!this.is_select_agree) {
				// 	this.$message.info('请勾选用户协议');
				// 	return false;
				// }

				// 如果手机号不正确就提示用户
				// if (!validate(phone, "phone")) {
				// 	_this.$message.info("请输入正确的手机号");
				// 	return false;
				// }


				vercode = this.codeList.join('');
				// 如果验证码为空就提示用户
				if (!vercode) {
					_this.$message.info("验证码不能为空");
					return false;
				}
				// 上述验证都通过，将按钮的点击状态改为true
				_this.is_click = true;
				/**
				 * @desc 请求验证码登录接口
				 * @param {String} global.apiUrls.postUserMobileLogin - 请求的接口,v1/5c78dca45ebc1,
				 * @param {Object} {} - 携带参数
				 * @param {String} {}.mobile - 手机号
				 * @param {String} {}.code - 验证码
				 */
				_this.$api
					.post(global.apiUrls.postUserMobileLogin, {
						user_type: 2,
						mobile: phone,
						code: vercode,
						user_source: SYSTEM_CONFIG.platform
					})
					.then((res) => {
						// 如果返回code码为1，且数据存在
						if (res.data.code == 1 && res.data.data) {
							let joinin_state = res.data.data.joinin_state;
							if (joinin_state != 5) {
								uni.navigateTo({
									url: '/shop/shop/shop-success/index'
								})
								return;
							}
							// 提示用户，后台返回的信息
							_this.$message.info(res.data.msg);
							/**
							 * @desc 向Vue发送事件
							 * @param {Object} res.data.data.userinfo - 后台返回来的用户信息
							 */
							_this.$store.commit("updateUserInfo", res.data.data.userinfo);
							let routes = getCurrentPages();
							console.log(routes.length)
							const config = {
							  userID:  '' + res.data.data.userinfo.id, // User ID
							  SDKAppID: 1600032891, // Your SDKAppID
							  secretKey: res.data.data.userinfo.secretkey, // Your secretKey
							};
							uni.setStorageSync('timInfo', config);
							setTimeout(() => {
								// 启动页跳转而来返回首页
								// if (routes.length == 1) {
								console.log('第一')
								uni.switchTab({
									url: '/pages/tab/home/home/index'
								})
								// } else {
								//   console.log('第二')
								//   // 延迟800ms后返回
								//   uni.navigateBack();
								// }

							}, 800);
						} else if (res.data.code == 0 && res.data.data == 3) {
							this.$util.showModal({
								title: '提示',
								confirmText: '去开通',
								content: res.data.msg,
								success: (s) => {
									if (s.confirm) {
										// console.log('用户点击确定');
										uni.navigateTo({
											url: '/shop/shop/shop-come/index?phone=' + phone
										});
									} else if (s.cancel) {

										// console.log('用户点击取消');
									}
								},
							})
							//   拒绝
						} else if (res.data.code == 0) {
							uni.navigateTo({
								url: '/shop/shop/shop-success/index'
							})
							return;
						} else {
							// 错误的情况下向用户发送后台返回来的长度
							_this.$message.info(res.data.msg);
						}
						// 把按钮的状态改为false
						this.is_click = false;
					});
			},
			// 提交
			// submit() {
			// 	if (this.loading) return;
			// 	if (this.phone.length != 11) return this.$message.info('手机号格式不正确');
			// 	if (this.codeList.length != 4) return this.$message.info('验证码格式不正确');
			// 	this.loading = true;
			// 	let data = {
			// 		mobile: this.phone,
			// 		code: this.codeList.join(''),
			// 	}
			// 	console.log(data);
			// 	this.$api.post(global.apiUrls.user_mobile_login, data)
			// 		.then(res => {
			// 			console.log(res)
			// 			this.loading = false
			// 			if (res.code == '1') {
			// 				this.$store.commit('updateUserInfo', res.data.userinfo);
			// 				var client_id = '';
			// 				// #ifdef APP-PLUS
			// 				client_id = plus.push.getClientInfo().clientid;
			// 				var user = res.data.userinfo;
			// 				if (client_id != user.client_id) {
			// 					this.$Request.post(this.$api.common.set_client_id, {
			// 						client_id: client_id
			// 					}).then(result => {
			// 						if (result.code == 1) {
			// 							//更新为新的client_id
			// 							user.client_id = client_id
			// 							this.$store.commit('updateUserInfo', user);
			// 						}
			// 					});
			// 				}
			// 				// #endif
			// 				uni.navigateBack({
			// 					delta: 2
			// 				})
			// 			} else {

			// 			}
			// 		}).catch(err => {
			// 			console.log(err);
			// 			this.loading = false
			// 		})
			// },
			// 返回
			back() {
				uni.navigateBack();
			},
			// 平台协议
			look() {
				uni.navigateTo({
					url: '/pages/center/message/article/articleDetails?id=1'
				})
			},
		},
		onLoad(options) {
			const {
				mobile,
				code
			} = options;
			if (mobile) {
				this.phone = mobile;
			}
			uni.showToast({
				icon: 'none',
				title: code,
				duration: 2000
			})
			this.downCount();
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;
		min-height: 100%;
		background-color: #FFFFFF;
		// background-image: url(../../static/images/login_002.png),url(../../static/images/login_001.png);
		background-position: 0 84rpx, 295rpx 50rpx;
		background-size: 455rpx 363rpx, 455rpx 480rpx;
		background-repeat: no-repeat, no-repeat;
	}

	.action-btn {
		width: 610rpx;
		height: 90rpx;
		color: #FFF0D5;
		border: 1px solid #4E8CEE;
		font-size: 32rpx;
		color: #4E8CEE;
		display: block;
		margin: 20rpx auto;
		line-height: 90rpx;
		background-color: #fff;
	}

	.code-wrap {
		width: 610rpx;
		height: 110rpx;
		position: relative;

		.wrap-input {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			.input {
				width: 100%;
				height: 100%;
				opacity: 0;
			}
		}

		.wrap-top {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 99;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			pointer-events: none;

			.list-item {
				width: 90rpx;
				height: 110rpx;
				background-color: #F7F7F7;
				border-radius: 8rpx;
				font-size: 48rpx;
				font-weight: bold;
				line-height: 110rpx;
				text-align: center;
				color: #666666;
				pointer-events: none;
			}
		}
	}
</style>